<template>
  <el-dialog title="Create New Group" :visible.sync="dialogVisible" @open="getGroupDetail" v-loading="loading">
    <div class="createNewGroup" style="height: 600px">
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="Basic Info" ></el-step>
        <el-step title="Introduction" ></el-step>
        <el-step title="Invite Members" ></el-step>
      </el-steps>
      <new-group-step1 ref="step1" v-if="dialogVisible" :form.sync="step1Params" v-show="active === 1"></new-group-step1>
      <new-group-step2 ref="step2" v-if="dialogVisible" :form.sync="step2Params" v-show="active === 2"></new-group-step2>
      <new-group-step3 ref="step3" v-if="dialogVisible" :form.sync="step3Params" v-show="active === 3"></new-group-step3>
    </div>
    <div slot="footer" class="dialog-footer">
      <span>
        <el-button size="small" @click="active = active-1" v-show="active > 1">Previous</el-button>
      </span>
      <el-button type="primary" size="small" @click="next">{{ active === 3 ? 'Create' : 'Next' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import newGroupStep1 from '@/views/modules/mspbots/peerGroup/createNewGroup/newGroupStep1'
import newGroupStep2 from '@/views/modules/mspbots/peerGroup/createNewGroup/newGroupStep2'
import newGroupStep3 from '@/views/modules/mspbots/peerGroup/createNewGroup/newGroupStep3'
export default {
  name: 'createNewGroup',
  props: ['visible', 'groupId'],
  components: {
    newGroupStep1,
    newGroupStep2,
    newGroupStep3
  },
  data () {
    return {
      loading: false,
      active: 1,
      step1Params: {
        name: '',
        properties: '',
        affiliation: '',
        publicMembers: '',
        description: '',
        meets: {
          meetsDate: '',
          meetsTime: '',
          repeat: 'No Repeats'
        }
      },
      step2Params: {
        goodFit: '',
        mission: '',
        rules: ''
      },
      step3Params: {
        emails: '',
        description: '',
        identifyUrl: ''
      }
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:groupId', null)
        this.$emit('update:visible', val)
        Object.assign(this.$data, this.$options.data())
      }
    }
  },
  methods: {
    async next () {
      const ref = `step${this.active}`
      try {
        await this.$refs[ref].submitForm()
        if (this.active === 3) {
          await this.submit()
        } else {
          this.active = this.active + 1
        }
      } catch (e) {
        console.error(e)
      }
    },
    async submit () {
      this.loading = true
      const { createPeerGroup, updatePeerGroup, postUploadImg } = this.$interface.system
      let iconUrl = null
      if (this.$refs['step1'].imageUrl) {
        const { data: img } = await postUploadImg({
          file: this.$refs['step1'].imageUrl,
          path: 'apps',
          bucket: 'widget'
        })
        iconUrl = img.data.src
      }
      let params = Object.assign({}, this.step1Params, this.step2Params)
      params.icon = iconUrl || 'https://intoss.mspbots.ai/widget/apps/1589525889169887232.png'
      params.emailInvitation = this.step3Params
      if (this.groupId) {
        params.id = this.groupId
      }
      const { data } = this.groupId ? await updatePeerGroup(params) : await createPeerGroup(params)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        this.dialogVisible = false
        this.$emit('update:timeStamp', new Date().getTime())
      } else {
        this.$message.error(data.msg)
      }
      this.loading = false
    },
    async getGroupDetail () {
      if (this.groupId) {
        this.loading = true
        const params = {
          groupId: this.groupId
        }
        const { getPeerGroupDetail } = this.$interface.system
        const { data } = await getPeerGroupDetail(params)
        Object.keys(this.step1Params).map(item => {
          this.step1Params[item] = data.data[item]
        })
        Object.keys(this.step2Params).map(item => {
          this.step2Params[item] = data.data[item]
        })
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer {
  border-top: 1px solid #00000014;
}
::v-deep .createNewGroup .el-form-item {
  margin-bottom: 22px;
}
 ::v-deep .el-dialog__header {
   border-bottom: 1px solid #00000014;
 }
.dialog-footer {
  display: flex;
  justify-content: space-between;
}
::v-deep .el-step__title.is-success{
  color: #45c2b5
}
::v-deep .el-step__head.is-success{
  color: #45c2b5;
  border-color: #45c2b5
}
</style>
